<template>
  <div>
    <el-dialog
      :title="title_name"
      :close-on-click-modal="false"
      append-to-body
      :before-close="cancledata"
      :visible.sync="dialogVisible"
      customClass="customWidth"
    >
      <div>
        <el-form
          :inline="true"
          :model="ruleForm"
          class="demo-form-inline info_form"
          label-width="120px"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="类型" prop="driver_type">
            <!-- <el-select v-model="ruleForm.driver_type" placeholder="请选择" style="width: 172px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                  </el-option>
                </el-select> -->
            <el-radio-group
              v-model="ruleForm.driver_type"
              class="radios"
              @input="handleChangeType"
            >
              <el-radio label="1">外部司机</el-radio>
              <el-radio label="0" disabled>自有司机</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <!-- <el-switch v-model="ruleForm.status" active-color="#13ce66" inactive-color="#ff4949" active-value="0" inactive-value="1">
                </el-switch> -->
            <el-radio-group v-model="ruleForm.status" style="width: 180px">
              <el-radio label="0">启用</el-radio>
              <el-radio label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="司机姓名" prop="name">
            <el-input
              placeholder="请输入司机姓名"
              v-model="ruleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="ruleForm.mobile"
              placeholder="司机可以使用手机号登录"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input
              v-model="ruleForm.account"
              placeholder="请自定义账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="ruleForm.id_card"
              placeholder="请输入司机的身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="所属承运商"
            prop="carrier_id"
            v-if="ruleForm.driver_type == 1"
            key="1"
          >
            <el-select
              v-model="ruleForm.carrier_id"
              placeholder="请选择司机的承运商"
            >
              <el-option
                v-for="item in carrierList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属组织"
            prop="orgId"
            v-if="ruleForm.driver_type === '0'"
          >
            <el-cascader
              ref="cascader"
              :options="branchData"
              :show-all-levels="false"
              placeholder="请选择司机所属组织"
              @change="handleChangeNetwork"
              v-model="ruleForm.orgId"
              :props="{
                emitPath: false,
                checkStrictly: true,
                label: 'branch_name',
                value: 'id',
                children: 'next_level_data',
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item
            label="驾驶证"
            prop="driving_licence"
            :rules="{
              required: this.ruleForm.driver_type === '0',
              message: '请上传驾驶证',
              trigger: 'change',
            }"
          >
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.driving_licence"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 5);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 5);
                }
              "
              name="审计报告"
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 180px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="从业资格证">
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.certificate_accounting"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 4);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 4);
                }
              "
              name="审计报告"
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 180px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>
          <!-- 内部司机 -->
          <el-form-item
            label="是否共享"
            v-if="ruleForm.driver_type === '0'"
            prop="shared"
          >
            <el-switch
              v-model="ruleForm.shared"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="共享组织"
            v-if="ruleForm.shared == '1' && ruleForm.driver_type === '0'"
            prop="shared_website_info"
          >
            <!-- <el-select v-model="ruleForm.shared_website_info" placeholder="请选择" multiple style="width: 172px">
                    <el-option v-for="item in originList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select> -->
            <el-cascader
              ref="cascader"
              :options="branchData"
              :show-all-levels="false"
              placeholder="请选择共享组织"
              v-model="ruleForm.shared_website_info"
              :props="{
                emitPath: false,
                checkStrictly: true,
                label: 'branch_name',
                value: 'id',
                children: 'next_level_data',
                multiple: true,
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <!-- <el-form-item label="备注">
                <el-input v-model="ruleForm.remark" placeholder="备注"></el-input>
              </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          :data-tracker="orderstate == '0' ? 'P26-8' : 'P26-10'"
          @click="cancledata()"
          >取 消</el-button
        >
        <!-- 代表创建的确定 -->
        <el-button
          type="primary"
          data-tracker="P26-7"
          @click="PageaddDriver('ruleForm')"
          v-if="orderstate == '0'"
          >确 定
        </el-button>
        <!-- 修改的确定 -->
        <el-button
          type="primary"
          data-tracker="P26-9"
          @click="PageEditDriver('ruleForm')"
          v-if="orderstate == '2'"
          >确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
// 通过司机的类型进行判断是内部司机还是外部司机
import {
  EditDriver,
  DeleteDriver,
  detailsDriver,
  queryDriver,
  addDriver,
  carrierID,
} from "@/api/information";
import {
  uploading,
  PagewebsiteList,
  regionList,
  dictionanry,
} from "@/page/material/common/common";
import { organizationBox } from "@/api/organization";

export default {
  data() {
    return {
      title_name: "司机",
      ruleForm: {
        name: "", //名称
        mobile: "", //手机
        id_card: "", //身份证
        carrier_id: "", //承运商id
        certificate_accounting: [], //从业资格证
        driving_licence: [], //驾驶证
        driver_type: "", //类型 0内部 1 外部
        status: "0", //状态 0 启用 1 禁用
        remark: "", //备注
        shared: "0", //对外共享
        shared_website_info: [], //共享网点
        orgId: "", // 所属组织
      },
      rules: {
        name: [{ required: true, message: "司机名称", trigger: "blur" }],
        mobile: [
          { required: true, message: "司机手机号", trigger: "blur" },
          {
            required: true,
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        driver_type: [{ required: true, message: "类型", trigger: "change" }], //类型 0内部 1 外部
        carrier_id: [
          { required: true, message: "所属承运商", trigger: "change" },
        ], //当是外部人员的时候是必填项
        status: [{ required: true, message: "是否启用", trigger: "blur" }], //启用状态
        orgId: [{ required: true, message: "所属组织", trigger: "change" }],
        shared: [
          { required: true, message: "请选择是否共享", trigger: "blur" },
        ],
        shared_website_info: [
          { required: true, message: "请选择共享组织", trigger: "change" },
        ],
      },
      deletparam: {
        id: [], //多选删的id
      },
      tableData: [
        {
          name: "", //名称
          mobile: "", //手机
          id_card: "", //身份证
          carrier_id: "", //承运商id
          driving_licence: "", //驾驶证
          driver_type: "", //类型 0内部 1 外部
          status: "", //状态 0 禁用 1 启用
          remark: "", //备注
        },
      ],
      // 查询条件
      queryList: {
        name: "", //查询的名字
        carrier_id: "", //承运商id
        page: 1, //第几页
        page_size: 10, //一页多少条
      },
      total: 0, //条数
      currentPage4: 1,
      orderstate: "0", //新增状态0 编辑状态2
      // dialogVisible: true, //判断弹框显示隐藏
      options: [], //司机类型
      value: "", //选择中后的样式
      consignerID: "", //选中的ID
      carrierList: [], //承运商列表
      maxheight: 400,
    };
  },
  components: {},
  props: ["dialogVisible"],
  mounted() {
    // console.log(this.dialogVisible, typeof this.dialogVisible, 'ddddd');
    // 获取承运商id
    this.pagecarrierID();
    // 数据字典
    this.dicList();
  },
  methods: {
    // 数据字典
    dicList() {
      // 司机来源函数
      dictionanry("driver_type").then((res) => {
        var res = res.data;
        res.list.forEach((item, i) => {
          res.list[i] = { value: item.item_code, label: item.item_name };
        });
        this.options = res.list;
      });
      organizationBox({ not_show_first_branch: 1 }).then((res) => {
        this.branchData = res.data;
      });
    },
    handleChangeNetwork(val) {
      // 所属组织赋值
      this.ruleForm.carrier_id = val ? val + "" : "";
      // console.log(val, 'val-----------');
    },
    handleChangeType() {
      // 切换司机类型，清空所属承运商
      this.ruleForm.carrier_id = "";
      this.ruleForm.orgId = "";
      // this.ruleForm.shared="0";
      this.$set(this.ruleForm, "shared", "0");
      this.ruleForm.shared_website_info = [];
    },
    // 上传功能时效
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        switch (resType) {
          // 从业资格证
          case "4":
            this.ruleForm.certificate_accounting.push({
              name: filehttp + result.name,
            });
            break;
          // 驾驶证
          case "5":
            this.ruleForm.driving_licence.push({
              name: filehttp + result.name,
            });
            break;
        }
      });
    },
    // 关闭弹框的函数
    closepop() {
      // this.dialogVisible = false;
      this.$emit("close");
    },
    // 获取承运商的id
    pagecarrierID() {
      var params = {
        name: "",
      };
      carrierID(params).then((res) => {
        this.carrierList = res.data;
      });
    },
    // 获取id
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建司机";
        this.orderstate = "0";
        this.openpop();
        this.formattedData();
      } else if (row != "" && type == 1) {
        this.title_name = "查看司机";
        this.orderstate = "";
        this.openpop();
        this.PagedetailsDriver(row.id);
      } else if (row != "" && type == 2) {
        this.title_name = "修改司机";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.openpop();
        this.PagedetailsDriver(row.id);
      }
    },
    // 分页
    // 一页有多少条
    handleSizeChange(val) {
      this.queryList.page_size = val;
      //  数据列表接口
      this.PagequeryDriver();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryList.page = val;
      //  数据列表接口
      this.PagequeryDriver();
    },
    // 选中的id
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    // 司机编辑
    PageEditDriver(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var license =
            this.ruleForm.driving_licence.length == 0
              ? ""
              : this.ruleForm.driving_licence[0].name;
          var permit =
            this.ruleForm.certificate_accounting.length == 0
              ? ""
              : this.ruleForm.certificate_accounting[0].name;
          this.ruleForm.carrier_id =
            this.ruleForm.carrier_id == "" ? "0" : this.ruleForm.carrier_id;
          var params = {
            id: this.consignerID,
            name: this.ruleForm.name,
            mobile: this.ruleForm.mobile,
            id_card: this.ruleForm.id_card,
            carrier_id: String(this.ruleForm.carrier_id),
            driving_licence: String(license),
            certificate_accounting: String(permit),
            driver_type: this.ruleForm.driver_type,
            status: this.ruleForm.status,
            remark: this.ruleForm.remark, //备注
          };
          EditDriver(params).then((res) => {
            if (res.code == 10000) {
              this.closepop();
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.PagequeryDriver();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 司机删除
    PageDeleteDriver() {
      var str = JSON.stringify(this.deletparam);
      DeleteDriver(str).then((res) => {
        // console.log("调用成功dele");
        if (res.code == 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.PagequeryDriver();
        }
      });
    },
    // 司机详情
    PagedetailsDriver(id) {
      var params = {
        id: id,
      };
      detailsDriver(params).then((res) => {
        var res = res.data;
        var license = [];
        if (res.driving_licence == "") {
          license = [];
        } else {
          license.push({ name: [res.driving_licence] });
        }
        var permit = [];
        if (res.certificate_accounting == "") {
          permit = [];
        } else {
          permit.push({ name: [res.certificate_accounting] });
        }
        this.ruleForm.name = res.name;
        this.ruleForm.mobile = res.mobile;
        this.ruleForm.id_card = res.id_card;
        this.ruleForm.carrier_id = Number(res.carrier_id);
        this.ruleForm.driving_licence = license;
        this.ruleForm.certificate_accounting = permit;
        this.ruleForm.driver_type = res.driver_type;
        this.ruleForm.status = res.status;
        this.ruleForm.remark = res.remark;
        this.ruleForm.shared = res.shared + "";
        this.ruleForm.shared_website_info = (res.shared_website_info || []).map(
          (item) => item.id
        );
      });
    },
    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 5:
          if (this.ruleForm.driving_licence.length > 0) {
            for (var i = 0; i < this.ruleForm.driving_licence.length; i++) {
              if (this.ruleForm.driving_licence[i].uid == file.uid) {
                this.ruleForm.driving_licence.splice(i, 1);
              }
            }
          }
          break;
        case 4:
          if (this.ruleForm.certificate_accounting.length > 0) {
            for (
              var i = 0;
              i < this.ruleForm.certificate_accounting.length;
              i++
            ) {
              if (this.ruleForm.certificate_accounting[i].uid == file.uid) {
                this.ruleForm.certificate_accounting.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    // 查询司机
    PagequeryDriver() {
      var prama = {
        name: this.queryList.name, //查询的名字
        carrier_id: String(this.queryList.carrier_id), //承运商id
        page: this.queryList.page, //第几页
        page_size: this.queryList.page_size, //一页多少条
      };
      queryDriver(prama).then((res) => {
        this.total = res.data.pagination.total;
        if (res.data.list == null) {
          var list = [];
          this.DataState(list);
        } else {
          this.DataState(res.data.list);
        }
      });
    },
    // 处理列表数据函数
    DataState(res) {
      res.forEach((item) => {
        item.status = item.status === "0" ? "启用" : "禁用";
        item.driver_type = item.driver_type == "0" ? "内部司机" : "外部司机";
      });
      this.tableData = res;
    },
    // 创建司机
    PageaddDriver(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var license =
            this.ruleForm.driving_licence.length == 0
              ? ""
              : (license = this.ruleForm.driving_licence[0].name);
          var permit =
            this.ruleForm.certificate_accounting.length == 0
              ? ""
              : this.ruleForm.certificate_accounting[0].name;
          var param = {
            name: this.ruleForm.name,
            mobile: this.ruleForm.mobile,
            id_card: this.ruleForm.id_card,
            account: this.ruleForm.account || this.ruleForm.mobile,
            carrier_id: String(this.ruleForm.carrier_id),
            driving_licence: String(license),
            certificate_accounting: String(permit), //从业资格证
            driver_type: this.ruleForm.driver_type,
            status: this.ruleForm.status,
            remark: this.ruleForm.remark,
            shared: this.ruleForm.shared,
            shared_website_info: this.ruleForm.shared_website_info,
          };
          addDriver(param).then((res) => {
            if (res.code == 10000) {
              // 关闭页面
              this.cancledata();
              // 获取查询
              // this.PagequeryDriver();
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.$emit("ok");
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击取消
    cancledata() {
      // 关闭页面
      this.closepop();
      this.formattedData();
    },
    // 关闭弹框的函数
    closepop() {
      // this.dialogVisible = false;
      this.$emit("close");
    },
    // 打开页面
    openpop() {
      this.dialogVisible = true;
    },
    // 格式化数据
    formattedData() {
      //格式化数据
      this.ruleForm = {
        name: "", //名称
        mobile: "", //手机
        id_card: "", //身份证
        account: "", //账号
        carrier_id: "0", //承运商id
        certificate_accounting: [], //从业资格证
        driving_licence: [], //驾驶证
        driver_type: "", //类型 0内部 1 外部
        status: "0", //状态 0 启用 1 禁用
        remark: "", //备注
        shared: "0", //对外共享
        shared_website_info: [], //共享网点
        orgId: "", // 所属组织
      };
    },
    // 重置数据
    seterquery() {
      this.queryList.name = "";
      this.queryList.carrier_id = "";
      this.PagequeryDriver();
    },
  },
};
</script>
  
<style lang="less" scoped>
.shareContainer {
  padding: 10px;
  // margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .shareheader {
    margin: 0 auto;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 10px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }
  }
}

.radios .el-radio {
  margin-right: 15px;
}

/deep/.customWidth {
  width: 700px !important;
}

.info_form {
  /deep/.el-form-item__content .el-input {
    width: 180px;
  }
}

/deep/.upload-demo .el-upload-list {
  max-width: 500px;
}
</style>
  